<template>
  <div class="size">
    <h5>Pixel Size <input v-model="size" readonly /><span>px</span></h5>
    <div>
      <input type="range" v-model="size" max="10" min="1" defaultValue="1" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 1,
    };
  },
  watch:{
      size(v){
          this.$bus.$emit("changSize",v)
      }
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.size {
  font-family: "Oswald";
  text-transform: uppercase;
  box-sizing: border-box;
  margin-bottom: 15px;
  padding: 0 10px;
  input[type="range"] {
    outline: none;
    width: 100%;
    height: 16px;
    border-radius: 16px;
    -webkit-appearance: none;
    background-color: #555;
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      height: 16px;
      width: 16px;
      background: #ffffff;
      border-radius: 50%;
      cursor: pointer;
      margin-top: 0px;
    }
  }
  h5 {
    display: flex;
    align-items: center;
    height: 45px;
    color: #fff;
    font-size: 12px;
    box-sizing: border-box;
    position: relative;
    input {
      margin-left: auto;
      width: 60px;
      padding: 0;
      border: 0;
      background: transparent;
      outline: none;
      text-align: right;
      height: 32px;
      box-sizing: border-box;
      padding: 0 5px;
      color: #fff;
      font-family: inherit;
      font-size: 13px;
    }
  }
}
</style>